<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Css 背景效果</title>
	<style>
		body {
			column-width: 300px;
		}
		.demo {
			display: inline-block;
			width: 100%;
			height: 30vh;
			margin: 10px 0;
		}

		.effect-1 {
			background: linear-gradient(#fb3, #58a)
		}

		.effect-2 {
			background: linear-gradient(#fb3 20%, #58a 80%)
		}

		.effect-3 {
			background: linear-gradient(#fb3 50%, #58a 50%)
		}

		.effect-4 {
			background-size: 100% 30px;
		}

		.effect-5 {
			background: linear-gradient(#fb3 30%, #58a 0);
			background-size: 100% 30px;
		}

		.effect-6 {
			background: linear-gradient(to right,#fb3 30%, #58a 0);
			background-size: 30px 100%;
		}

		.effect-7 {
			background: repeating-linear-gradient(45deg, #fb3, #fb3 15px, #58a 0, #58a 30px)
		}

		.effect-8 {
			background: #58a;
			background-image: repeating-linear-gradient(45deg, 
				hsla(0, 0%, 100%, .1), 
				hsla(0, 0%, 100%, .1) 15px, 
				transparent 0, 
				transparent 30px)
		}

		.effect-9 {
			background: white;
			background-image: 
			    linear-gradient(90deg, rgba(200, 0, 0, .5) 50%, transparent 0),
			    linear-gradient(rgba(200, 0, 0, .5) 50%, transparent 0);
			background-size: 30px 30px;

		}

		.effect-10 {
			background: #58a;
			background-image: 
				linear-gradient(white 1px, transparent 0),
				linear-gradient(90deg, white 1px, transparent 0);
			background-size: 30px 30px;
		}

		.effect-11 {
			background: #58a;
			background-image: 
				linear-gradient(white 2px, transparent 0),
				linear-gradient(90deg, white 2px, transparent 0),
				linear-gradient(hsla(0, 0%, 100%, .3) 1px, transparent 0),
				linear-gradient(90deg, hsla(0, 0%, 100%, .3) 1px, transparent 0);
			background-size: 75px 75px, 75px 75px,
							 15px 15px, 15px 15px;
		}

		.effect-12 {
			background: #655;
			background-image: radial-gradient(tan 30%, transparent 0);
			background-size: 30px 30px;
		}

		.effect-13 {
			background: #655;
			background-image: 
				radial-gradient(tan 30%, transparent 0),
				radial-gradient(tan 30%, transparent 0);
			background-size: 30px 30px;
			background-position: 0 0, 15px 15px;
		}

		.effect-14 {
			background: #eee;
			background-image: 
				linear-gradient(45deg, #bbb 50%, transparent 0);
			background-size: 30px 30px;
		}

		.effect-15 {
			background: #eee;
			background-image: 
				linear-gradient(45deg, transparent 75%, #bbb 0);
			background-size: 30px 30px;
		}

		.effect-16 {
			background: #eee;
			background-image: 
				linear-gradient(45deg, #bbb 25%, transparent 0),
				linear-gradient(45deg, transparent 75%, #bbb 0),
				linear-gradient(45deg, #bbb 25%, transparent 0),
				linear-gradient(45deg, transparent 75%, #bbb 0);
			background-size: 30px 30px;
			background-position: 0 0, 15px 15px, 15px 15px, 30px 30px;
		}

		.effect-17 {
			background: #eee;
			background-image: 
				conic-gradient(red, yellow, lime, aqua, blue, fuchsia, red)
		}

		.effect-18 {
			background: 
				radial-gradient(circle closest-side at 41% 61%, pink 28%, #b030 30%) 50px 50px,
				radial-gradient(circle closest-side at 63% 60%, pink 28%, #b030 30%) 50px 50px,
				radial-gradient(circle closest-side at 60% 42%, #b03 18%, #b030 20%) 50px 50px,
				radial-gradient(circle closest-side at 45% 42%, #b03 18%, #b030 20%) 50px 50px,
				radial-gradient(circle closest-side at 53% 49%, #b03 18%, #b030 20%) 50px 50px,
				
				radial-gradient(circle closest-side at 41% 61%, pink 28%, #b030 30%),
				radial-gradient(circle closest-side at 63% 60%, pink 28%, #b030 30%),
				radial-gradient(circle closest-side at 60% 42%, #b03 18%, #b030 20%),
				radial-gradient(circle closest-side at 45% 42%, #b03 18%, #b030 20%),
				radial-gradient(circle closest-side at 53% 49%, #b03 18%, #b030 20%);
			background-color: pink;
			background-size: 100px 100px;
		}

		.effect-19 {
			background: 
				linear-gradient(transparent 0%, #000 100%),
				linear-gradient(90deg, transparent 0%, #f00 100%);
		}
	</style>
</head>
<body>
	<div class="demo effect-1"></div>

	<div class="demo effect-2"></div>

	<div class="demo effect-3"></div>

	<div class="demo effect-3 effect-4"></div>

	<div class="demo effect-5"></div>

	<div class="demo effect-6"></div>

	<div class="demo effect-7"></div>

	<div class="demo effect-8"></div>

	<div class="demo effect-9"></div>

	<div class="demo effect-10"></div>

	<div class="demo effect-11"></div>

	<div class="demo effect-12"></div>

	<div class="demo effect-13"></div>

	<div class="demo effect-14"></div>

	<div class="demo effect-15"></div>

	<div class="demo effect-16"></div>
	
	<div class="demo effect-17"></div>

	<div class="demo effect-18"></div>

	<div class="demo effect-19"></div>

</body>
</html>